import React, { Component } from 'react'
import "./index.less"
import logo from "../../assets/images/logo.png"
import {Link,withRouter} from "react-router-dom"
import { Menu } from 'antd';
import menuConfig from "../../config/menuconfig.js"
import memoryUtils from '../../utils/memoryUtils';


const { SubMenu } = Menu;
/*
    左侧导航的组件
 */
class LeftNav extends Component {
    constructor(props){
        super(props)
        //初始化状态
        this.menuNodes = this.getMenuNodes(menuConfig);
    }
    
    // 判断当前登录用户对item是否有权限
    hasAuth =(item) => {
        const {key, isPublic} = item
        const username = memoryUtils.user.username
        const menus = memoryUtils.user.role.menus
        
        // 1. 如果当前用户是admin
        // 2. 如果当前item是公开的
        // 3. 如果当前用户有此item的权限: key没有在menus中
        if(username === "admin" || isPublic || menus.indexOf(key) !== -1) {
            return true
        } else if(item.children){ // 4.如果当前用户有此item的某个子item的权限
            return !!item.children.find(child => menus.indexOf(child.key) !== -1)
        }
        return false
    }

    /*  
        根据menu的数据数组生成对应的标签数组
        使用map+递归调用
     */

    
    getMenuNodes = (menuConfig) => {
        return menuConfig.map(item => {
            // 得到当前请求的路由路径
            const path = this.props.location.pathname;

            // 如果当前用户有item对应的权限,才显示对应的菜单项
            if(this.hasAuth(item)) {
                if(!item.children) {
                    return (
                        <Menu.Item key={item.key} icon={item.icon}>
                            <Link to={item.key}>
                                {item.title}
                            </Link>
                        </Menu.Item>
                    )
                }else{
    
                    // 查找一个与当前请求路径匹配的子Item
                    const cItem = item.children.find(cItem => path.indexOf(cItem.key) === 0)
                    // 如果存在,说明当前item的子列表需要打开
                    if(cItem) {
                        this.openKey = item.key;
                    }
                    return (
                        <SubMenu key={item.key} icon={item.icon} title={item.title}>
                            {this.getMenuNodes(item.children)}
                        </SubMenu>
                    )
                }
            } else {
                return null
            }  
        })
    }

    /* getMenuNodes_reduce = (menuConfig) => {
        return menuConfig.reduce((pre, item) => {
            // 向pre添加<Menu.item>
            if(!item.children){
                pre.push((
                    <Menu.Item key={item.key} icon={item.icon}>
                        <Link to={item.key}>
                            {item.title}
                        </Link>
                    </Menu.Item>
                ))
            } // 向pre添加<SubMenu>
            else {
                pre.push((
                    <SubMenu key={item.key} icon={item.icon} title={item.title}>
                        {this.getMenuNodes_reduce(item.children)}
                    </SubMenu>
                ))
            }
            

            return pre
        },[])
    } */

    /*
        在第一次render()之前执行一次
        为第一个render()准备数据(同步的) 
     */
    /* componentWillMount() {
        this.menuNodes = this.getMenuNodes(menuConfig);
    } */

    render() {
        // 得到当前请求的路由路径
        let path = this.props.location.pathname;
        // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
        if(path.indexOf("/product") === 0){ // 说明请求的是商品或其子路由界面
            path = "/product"
        } 
        const openKey = this.openKey;
        return (
            
            <div className="left-nav">
                <Link to="/" className="left-nav-header">
                    <img src={logo} alt="" />
                    <h1>硅谷后台</h1>
                </Link>

                <Menu
                mode="inline"
                theme="dark"
                selectedKeys={[path]}
                defaultOpenKeys={[openKey]}
                >
                    {
                        this.menuNodes
                    }
                </Menu>
            </div>
        )
    }
}

/*
        withRouter高阶组件:
        包装非路由组件,返回一个新的组件
        新的组件向非路由组件传递三个属性:history/location/match
     */
export default withRouter(LeftNav);